<script setup>
import { ref } from 'vue';
const showShare = ref(false);
const options = [
   [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
   ],[
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
   ],
];
const list = ref([
   {userNike:'安妮',hdImg:'h.jpg',group:'小说圈',content:'苦乐全凭自己判断，这和客观环境并不一定有直接关系，正如一个不爱珠宝的女人，即使置身在极其重视虚荣的环境，也无伤她的自尊。',imgs:['h.jpg','h.jpg'],likeNum:22,commentNum: 12,shareNum:5},
   {userNike:'境由心造',hdImg:'gold.png',group:'美文圈',content:'一个人的处境是苦是乐常是主观的。有人安于某种生活，有人不能。因此能安于自已目前处境的不妨就如此生活下去，不能的只好努力另找出路。',imgs:['h.jpg','h.jpg','h.jpg'],likeNum:22,commentNum: 12,shareNum:5},
   {userNike:'境由心造',hdImg:'gold.png',group:'美文圈',content:'你无法断言哪里才是成功的，也无法肯定当自已到达了某一点之后，会不会快乐。有些人永远不会感到满足，他的快乐只建立在不断地追求与争取的过程之中。因此，他的目标不断地向远处推移。这种人的快乐可能少，但成就可能大。',imgs:['h.jpg','h.jpg','h.jpg','h.jpg'],likeNum:22,commentNum: 12,shareNum:5},
   {userNike:'境由心造',hdImg:'gold.png',group:'小说圈',content:'拥有万卷书的穷书生，并不想去和百万富翁交换钻石或股票。满足于田园生活的人也并不艳羡任何学者的荣誉头衔，或高官厚禄。',imgs:['h.jpg','h.jpg','h.jpg','h.jpg','h.jpg','h.jpg'],likeNum:22,commentNum: 12,shareNum:5},
   {userNike:'抉择',hdImg:'h.jpg',group:'小说圈',content:'你的爱好就是你的方向，你的兴趣就是你的资本，你的性情就是你的命运。各人有各人理想的乐园，有自已所乐于安享的花花世界。',imgs:['h.jpg'],likeNum:22,commentNum: 12,shareNum:5},
   {userNike:'抉择',hdImg:'h.jpg',group:'美文圈',content:'一位朋友谈到他亲戚的姑婆，一生从来没有穿过合脚的鞋子，常穿着巨大的鞋子走来走去。儿子晚辈如果问她，她就会说：“大小鞋都是一样的价钱，为什么不买大的？”',imgs:[],likeNum:22,commentNum: 12,shareNum:5},
   {userNike:'抉择',hdImg:'h.jpg',group:'小说圈',content:'每次我转述这个故事，总有一些人笑得岔了气。其实，有时生活里我们会看到很多这样的“姑婆”。',likeNum:22,commentNum: 12,shareNum:5},
]);

</script>

<template>
   <div class="community">
      <div class="community-hd">
         <div class="community-hd-item">
            <h3>推荐</h3>
         </div>
      </div>
      <div class="community-body">
         <div class="community-body-item" v-for="(v,i) in list" :key="i">
            <div class="community-item-hd">
               <img :src="`/src/assets/images/${v.hdImg}`" :alt="v.userNike">
               <p>{{ v.group }}</p>
               <span>{{ v.userNike }}</span>
               <div class="community-share">
                  <van-cell class="iconfont icon-gengduo" @click="showShare = true" />
               </div>
            </div>
            <div class="community-item-title">
               {{ v.content }}
            </div>
            <div class="community-item-img">
               <img v-for="(img,j) in v.imgs" :key="j" :src="`/src/assets/images/${img}`" alt="存图">
            </div>
            <div class="community-item-review">
               <span><i class="iconfont icon-fenxiangzhuanfa">{{ v.shareNum }}</i></span>
               <span><i class="iconfont icon-comment">{{ v.commentNum }}</i></span>
               <span><i class="iconfont icon-aixin">{{ v.likeNum }}</i></span>
            </div>
         </div>
         <!-- 分享面板 -->
         <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options"/>
      </div>
   </div>
</template>

<style scoped>
</style>